import React, { memo, useCallback, useEffect, useState } from "react";
import {
  Table,
  Popconfirm,
  Button,
  message,
  Modal,
  Form,
  Input,
  Pagination,
} from "antd";
import request from "@/service/request";
import qs from "qs";
import { Blogtypeadminwrap } from "./style";
export default memo(function Blogtypeadmin() {
  //初始化修改类别表单数据
  const [form1] = Form.useForm();
  //重置添加表单数据
  const [form2] = Form.useForm();
  //博客类别
  const [blogtype, setBlogtype] = useState([]);
  //修改博客类别表单是否显示
  const [pinvis, setPinvis] = useState(false);
  //添加博客类别是否显示
  const [addvis, setAddvis] = useState(false);
  //避免博客类别id丢失
  const [typeid, setTypeid] = useState();
  //每一页的数量
  const [pagesize, setPagesize] = useState(5);
  //当前在第几页
  const [currentindex, setCurrentindex] = useState(0);
  //修改博客类别表单初始
  const xiugai = useCallback(
    (record) => {
      setTypeid(record.id);
      setPinvis(true);
      form1.setFieldsValue(record);
    },
    [form1]
  );
  //提交博客类别修改
  const finish = (value) => {
    value.id = typeid;
    request.post("travel/handleblogtype", qs.stringify(value)).then((value) => {
      message.success("修改博客类别成功");
      setPinvis(false);
      request.get("travel/Blogtype").then((value) => {
        setBlogtype(value);
      });
    });
  };
  //删除博客类别
  const deletetype = useCallback((id) => {
    request.get(`travel/handleblogtype?id=${id}`).then((value) => {
      message.success("删除博客类别成功");
      request.get("travel/Blogtype").then((value) => {
        setBlogtype(value);
      });
    });
  }, []);
  //添加博客类别
  const finish2 = useCallback(
    (value) => {
      console.log(value);
      request.post(`travel/addtype`, qs.stringify(value)).then(() => {
        message.success("添加博客类别成功");
        setAddvis(false);
        form2.resetFields();
        request.get("travel/Blogtype").then((value) => {
          setBlogtype(value);
        });
      });
    },
    [form2]
  );
  //获取博客类别
  useEffect(() => {
    request.get("travel/Blogtype").then((value) => {
      setBlogtype(value);
    });
  }, []);
  const column1 = [
    {
      title: "博客类别",
      dataIndex: "typeName",
      key: "typeName",
      align: "center",
      width: 70,
      ellipsis: true,
    },
    {
      title: "操作",
      dataIndex: "id",
      key: "id",
      align: "center",
      width: 90,
      ellipsis: true,
      render: (id, record) => (
        <div className="btwrap">
          <Button
            type="primary"
            shape="round"
            size={"middle"}
            onClick={(e) => xiugai(record)}
          >
            修改
          </Button>
          <Popconfirm
            title="你确定删除此博客吗？"
            okText="确定"
            cancelText="取消"
            onConfirm={(e) => deletetype(id)}
          >
            <Button type="primary" danger shape="round" size={"middle"}>
              删除
            </Button>
          </Popconfirm>
        </div>
      ),
    },
  ];
  const pagechange = useCallback((page, size) => {
    setPagesize(size);
    setCurrentindex((page - 1) * size);
  }, []);
  return (
    <Blogtypeadminwrap>
      <div className="top">你当前的位置>博客类别管理</div>
      <div className="addbt">
        <Button
          type="primary"
          htmlType="submit"
          onClick={(e) => setAddvis(true)}
        >
          添加博客类别
        </Button>
      </div>
      {/* 修改博客类别对话框 */}
      <Modal
        title="添加博客类别"
        visible={pinvis}
        onCancel={(e) => setPinvis(false)}
        footer={[]}
      >
        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          onFinish={finish}
          form={form1}
          autoComplete="off"
        >
          <Form.Item
            label="博客类别"
            name="typeName"
            rules={[{ required: true, message: "请输入博客类别!" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="primary" htmlType="submit">
              添加博客类别
            </Button>
          </Form.Item>
        </Form>
      </Modal>
      {/* 添加博客类别对话框 */}
      <Modal
        title="添加博客类别"
        visible={addvis}
        onCancel={(e) => setAddvis(false)}
        footer={[]}
      >
        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          onFinish={finish2}
          form={form2}
          autoComplete="off"
        >
          <Form.Item
            label="博客类别"
            name="typeName"
            rules={[{ required: true, message: "请输入博客类别!" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="primary" htmlType="submit">
              添加博客类别
            </Button>
          </Form.Item>
        </Form>
      </Modal>
      <Table
        columns={column1}
        dataSource={blogtype.slice(currentindex, currentindex + pagesize)}
        rowKey={(record) => record.id}
        scroll={{ y: 400 }}
        pagination={false}
      />
      <div className="page">
        <Pagination
          pageSize={pagesize}
          total={blogtype.length}
          onChange={pagechange}
          pageSizeOptions={[5, 8, 10]}
          showSizeChanger
        />
      </div>
    </Blogtypeadminwrap>
  );
});
